<template>
	<div class="leader-area">
    <div class="top-bar">
      <div class="title-con" >
        <mt-navbar v-model="selected"  refs="navTitle" class="navbar">
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='1'>职能部门</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='2'>服务机构</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='3'>研究机构</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='4'>办事机构</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='5'>外派机构</mt-tab-item>
        </mt-navbar>
      </div>
      <div class="search-area">
          <i class="fenge-span icon-line"></i>
          <span @click='showSearch=true'>
            <img src="/static/imgs/search.png" alt="">
          </span>
      </div>
     
    </div>
    <v-down @click.native='dropDown'></v-down>
      
    <v-search-show  v-if='showSearch'></v-search-show> 
<!--:swipeable="true"-->
      <mt-tab-container v-model="selected" >
          <mt-tab-container-item id='1'>
            <v-person :response='response'></v-person>
            <!--<mt-loadmore :top-method="loadTop"  :bottom-method="loadBottom" ref="loadmore" @bottom-status-change="handleTopChange">
              <v-person :response='response'></v-person>
              <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                <span v-show="topStatus === 'loading'">Loading...</span>
              </div>
              <div slot="bottom" class="mint-loadmore-top">
                <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                <span v-show="topStatus === 'loading'">Loading...</span>
              </div>
            </mt-loadmore>-->
          </mt-tab-container-item>
          <mt-tab-container-item id='2'>
            <v-person :response='response'></v-person>

          </mt-tab-container-item>
          <mt-tab-container-item id='3'>
            <v-person :response='response'></v-person>

          </mt-tab-container-item>
          <mt-tab-container-item id='4'>
            <v-person :response='response'></v-person>

          </mt-tab-container-item>
          <mt-tab-container-item id='5'>
            <v-person :response='response'></v-person>

          </mt-tab-container-item>
      </mt-tab-container>


    <v-panel v-if="showPanel" :secondShow.sync="secondShow" :isShow.sync="showPanel"  :isFirstShow.sync="isFirstShow" @loadEnd="loadEnd"></v-panel>
    <mt-spinner v-if="spinnerShow" class="spinner" type="fading-circle" color="#26a2ff"></mt-spinner>
      <!--<v-search :showSearch="showMask"></v-search>
      <mt-actionsheet
      cancel-text=""
      :actions="actions"
      v-model="sheetVisible"
      >
      </mt-actionsheet>-->
	</div>
</template>

<script>
import Vue from "vue";

import { Navbar, TabItem, TabContainer, TabContainerItem, Spinner,Toast} from "mint-ui";
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
Vue.component(Spinner.name, Spinner);

import Bus from '@/common/js/vueBus'
//  Vue.component(Loadmore.name, Loadmore);, Loadmore 
import DownSel from "@/components/personal/downSel";
import searchShow from "@/components/personal/searchShow";
import peoResume from '@/components/personal/peoPanel';

import personView from "@/components/personal/tab1view";

// const peoResume = r => require.ensure([],() => r(require('@/components/personal/peoPanel')),'peoPanel');
import showLoading from '@/common/js/loading'

export default {
  name: "app",
  components: {
    MtNavbar: Navbar,
    "v-down": DownSel,
    "v-person": personView,
    "v-search-show": searchShow,
    'v-panel':peoResume
  },
  data() {
    return {
      selected: "1",
      maskLabel: "",
      tableader: true,
      response: [],
      maskList: [],
      pageNum:1,
      pageSize:10,
      isLoadEnd:false,
      searchRecord:false,
      showMask: "",
      total: 0,
      topStatus: '',
      isSearch:false,
      showSearch: false,
      searchValue: "",
      searchNum:1,
      searchResultArr:[],

      isFirstTime:true,


      isShowResume:false,
      spinnerShow:false,
      showPanel:false,
      isFirstShow:true,
      secondShow:true,
    };
  },
  created() {

      
      if (window.location.origin != 'http://202.104.142.49:8089'  &&  location.search) {
          var token = location.search.split("=")[1];
          localStorage.setItem('token',token);
      
          this.Axios.Post(this.URL.webLogin.url,{}).then(res=>{
            if (res.data.status === 1) {
                  this.changeDatas();
                  Bus.$on("showSearch", data => {
                      this.searchValue = null;
                      this.showSearch = false;
                      this.clearSearch();
                  });
                  Bus.$on("searchValue", data => {
                    console.log(data);

                    this.searchValue = data;
                  });
                  Bus.$on("searchPage", data => {
                    if (data) {
                      this.clearSearch();
                      this.employeeSearch(false);
                      return;
                    }
                    this.searchNum++
                  });
                  Bus.$on('showPanel',(val)=>{
                      this.showPanel = true;
                      this.spinnerShow = true;
                  })
                  window.addEventListener("scroll",this.scrollFunc);
            }


          }) 
      } else {
          this.changeDatas();
          Bus.$on("showSearch", data => {
              this.searchValue = null;
              this.showSearch = false;
              this.clearSearch();
          });
          Bus.$on("searchValue", data => {
            console.log(data);

            this.searchValue = data;
          });
          Bus.$on("searchPage", data => {
            if (data) {
              this.clearSearch();
              this.employeeSearch(false);
              return;
            }
            this.searchNum++
          });

          Bus.$on('showPanel',(val)=>{
              this.showPanel = true;
              this.spinnerShow = true;
          })

          window.addEventListener("scroll",this.scrollFunc);
      }
      





    
  },
  watch: {
    selected(newValue, oldValue) {

      this.isFirstTime = true;

      showLoading.showLoginPanel();
      setTimeout(function(){
          showLoading.destroyInstance();
      },14000)

      Bus.$emit('checked');
      
      this.changeDatas(true);
    },
    maskLabel(newValue, oldValue) {
      this.changeDatas(false);
    },

    searchValue(newValue, oldValue) {
      
      this.clearSearch();
      if (!newValue) {return};
      this.employeeSearch(false);
    },
    searchNum(newValue, oldValue){
      if(newValue === 1){return;} 
      this.employeeSearch(false);
    }
  },
  computed: {
    selectedName() {
      let selected = this.selected,
        params = null;
      switch (selected) {
        case "1":
          params = "职能部门";
          break;
        case "2":
          params = "服务机构";
          break;
        case "3":
          params = "研究机构";
          break;
        case "4":
          params = "办事机构";
          break;
        case "5":
          params = "外派机构及人员";
          break;
        default:
          break;
      }
      return params;
    }
  },
  methods: {

    loadEnd:function(){
        this.spinnerShow = false;
    },


    dropDown() {
      this.showMask = true;
      Bus.$emit("maskList", this.maskList);
      Bus.$emit("showMask", this.showMask);
      
      // this.Axios
      //   .Post(this.URL.getDeptListByType.url, {
      //     deptCategory: this.selectedName
      //   })
      //   .then(response => {
      //     this.maskList = response.data.datas;
      //     Bus.$emit("maskList", this.maskList);
      //   });
    },
    handleTopChange(status) {
      console.log(status);
      this.topStatus = status;
    },
    changeDatas(flag) {
      this.clearData();
      if (flag) {
        this.maskLabel = "";
        Bus.$emit("maskLabel", this.maskLabel);
      } else {
        Bus.$on("maskLabel", data => {
          if (data === "全部") {
              this.maskLabel = '';
          } else {
              this.maskLabel = data
          }
        });
      }
      this.employAjax();
    },
    
    employAjax:function(){
      var params = {
          deptCategory: this.selectedName,
          deptDescr: this.maskLabel,
          employeeId: "",
          pageSize:this.pageSize,
          pageNum:this.pageNum,
          name: this.searchValue
      };
      this.postAjax(this.URL.getEmpListByService.url,params);
    },

    employeeSearch:function(){
      var params = {
          pageSize:this.pageSize,
          pageNum:this.searchNum,
          search: this.searchValue
      };

      this.postAjax(this.URL.employeeSearch.url,params);      
    },
    clearData:function(){
        this.isLoadEnd = false;
        this.pageNum = 1;  
        this.response = [];
    },
    clearSearch:function(){
        this.searchNum = 1;
        
        this.searchResultArr=[];
    },
    postAjax:function(url,params){
        var self = this;
        this.Axios
            .Post(url, params)
            .then(response => {

              showLoading.destroyInstance();

              let res = response.data;

               if (!res.datas) {
                  Toast({
                    message: res.message || '查询数据失败',
                    position: "center",
                    className: "toastStyle",
                    duration: 2000
                  });        
                  return;
               }


               

              if (this.showSearch) {
                  if (!res.datas) {
                      return;
                  }
                  this.searchResultArr = this.searchResultArr.concat(res.datas.emplist || []);
           
                  Bus.$emit("dataListArr", this.searchResultArr);
                  Bus.$emit("isEnd",res.total === this.searchResultArr.length)
                  return;
              }

              //获取部门列表
              if (this.isFirstTime) {
                  var arr = res.datas.deptlist;
                  arr && arr.unshift({"descr":"全部","total":1,"deptid":""})
                  this.maskList = arr;
                  this.isFirstTime = false;
              }



              this.response = this.response.concat(res.datas.emplist);
              this.total = res.total;
              if (this.total === this.response.length) {
                  this.isLoadEnd = true;
              }
              Bus.$emit("total", this.total);
          
            });
    },

    scrollFunc:function(event) {
        var self = this;
        if (this.searchRecord || this.isLoadEnd) {
            return;
        }
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 
        if(document.documentElement.scrollHeight - (document.documentElement.clientHeight + scrollTop) == 0 ) {
            self.pageNum++;
            self.employAjax();
            // self.getLeaderListCommonAjax();
        }    
    }
  }
};
</script>

<style>
.top-bar {
  vertical-align: top;
  position: relative;
  background-color: #fff;
}

.top-bar .title-con {
  width: 100%;
  overflow-x: auto;

  display: inline-flex;
}
.top-bar .title-con::-webkit-scrollbar {
  display: none;
}

.leader-area .search-area {
  /*display: inline-block;*/
  top: 0;
  right: 0;
  position: absolute;
  height: 1rem;
  width: 1.5rem;
  vertical-align: top;
  background-color: rgba(255, 255, 255, 0.95);
}
.leader-area .top-bar img {
  width: 0.28rem;
  height: 0.28rem;
  margin-top: 0.35rem;
}
.leader-area {
  font-size: 0.28rem;
  /* height: 100%; */
}
.leader-area .mint-tab-item-label {
  margin: auto;
  font-size: 0.32rem;
  font-weight: 600;
}
.leader-area .navbar .tab-item-leader {
  width: 1.6rem;
}
.leader-area .top-bar .title-con .navbar {
  padding-right: 1.5rem;
}
.leader-area .mint-tab-container {
  height: 100%;
  background-color: #f3f3f3;
}
.leader-area .mint-navbar .mint-tab-item.is-selected {
  border-bottom: 0px;
}
/* .leader-area .mint-spinner-fading-circle {
  margin: 2rem auto;
} */
.spinner>div{
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    z-index:10000;
    margin:auto;
    width: 1rem !important;
    height: 0.8rem !important;
}
body, div.leader-area, div.leader-area .mint-tab-container-wrap, html {
    height: 100%;
}
</style>
<style scope="scope">
.leader-area .search-area .fenge-span {
  display: inline-block;
  height: 0.5rem;
  margin-left: 0.5rem;
  margin-top: 0.2rem;
  margin-right: 0.3rem;
  width: 0.1rem;
}
.uint-header {
  clear: both;
  overflow: hidden;
  padding-left: 0.1rem;
  padding-right: 0.2rem;
}


</style>

